<template>
	<div class="order-detail-box">
		<nav-bar class="nav-bar">
			<template v-slot:default>
				定单详情
			</template>
		</nav-bar>
		<div class="order-status">
			<div class="status-item">
				<label>订单状态：</label>
				<span>{{ statusString }}</span>
			</div>
			<div class="status-item">
				<label>订单编号：</label>
				<span>{{ detail.order_no }}</span>
			</div>
			<div class="status-item">
				<label>下单时间：</label>
				<span>{{ detail.created_at }}</span>
			</div>

			<van-button v-if="detail.status === 1" block color="#1baeae" style="margin-bottom: 10px" @click="showPopup">
				去支付
			</van-button>
			<van-button v-if="detail.status === 2" block @click="handleConfirmOrder">确认订单</van-button>
		</div>
		<div class="order-price">
			<div class="price-item">
				<label>商品金额：</label>
				<span>¥ {{ total.toFixed(2) }}</span>
			</div>
			<div class="price-item">
				<label>配送方式：</label>
				<span>逆风速递</span>
			</div>
		</div>

		<van-card
			v-for="item in detail.orderDetails.data"
			:key="item.id"
			:num="item.num"
			:price="item.price.toFixed(2)"
			:thumb="item.goods.cover_url"
			:title="item.goods.title"
			desc="全场包邮"
		/>



		<div style="width:100%;height:50px;">

		</div>

		<van-popup
			v-model:show="popupVisible"
			:close-on-click-overlay="false"
			:style="{ height: '40%',paddingTop:'20px' }"
			closeable
			position="bottom"
			@close="closePopup"
		>

			<van-grid :border="false" :column-num="2">
				<van-grid-item @click="thePaySuccess">
					支付宝二维码<br><br>
					<van-image :src="aliyun" height="150" width="150"/>
				</van-grid-item>
				<van-grid-item>
					微信二维码<br><br>
					<van-image :src="wechat" height="150" width="150"/>
				</van-grid-item>
			</van-grid>
		</van-popup>
	</div>
</template>

<script setup>
import NavBar from "@/components/common/navbar/NavBar.vue";
import {computed, onMounted, reactive, ref, toRefs} from "vue";
import {showLoadingToast, showSuccessToast} from "vant";
import {useRoute, useRouter} from "vue-router";
import {getOrderDetail, paySuccess} from "@/network/order";

const route = useRoute()
const router = useRouter()
const state = reactive({
	orderNo: '',
	detail: {
		orderDetails: {
			data: []
		}
	}
})
const {detail} = toRefs(state)
const init = () => {
	const {id} = route.query
	state.orderNo = id
	getOrderDetail(id).then(res => {
		state.detail = res
	})
}

const statusString = computed(() => {
	let status = ['已下单', '已支付', '等待发货', '确认收货', '已过期'];
	return status[(state.detail.status) - 1]
})
const total = computed(() => {
	let total = 0;
	state.detail.orderDetails.data.forEach(item => {
		total += item.price * item.num
	})
	return total
})
const aliyun = computed(() => {
	return state.detail.aliyun
})
const wechat = computed(() => {
	return state.detail.wechat
})
const thePaySuccess = () => {
	paySuccess(state.orderNo, {type: 'aliyun'}).then(() => {
		showSuccessToast('支付成功');
		// 模拟支付成功，跳转到订单详情页
		router.replace({path: '/orderdetail', query: {id: state.orderNo}})
		console.log(router)
	})
}
// 弹出二维码
const popupVisible = ref(false)
const showPopup = () => {
	popupVisible.value = true
}
const closePopup = () => {
	popupVisible.value = false
}
onMounted(() => {
	showLoadingToast({
		message: '加载中...',
		forbidClick: true,
	});
	init()
})
</script>

<style lang="scss" scoped>
.order-detail-box {
	text-align: left;
	background: #f7f7f7;

	.order-status {
		background: #fff;
		margin-top: 44px;
		padding: 20px;
		font-size: 15px;

		.status-item {
			margin-bottom: 10px;

			label {
				color: #999;
			}

			span {

			}
		}
	}

	.order-price {
		background: #fff;
		margin: 20px 0;
		padding: 20px;
		font-size: 15px;

		.price-item {
			margin-bottom: 10px;

			label {
				color: #999;
			}

			span {

			}
		}
	}

	.van-card {
		margin-top: 0;
	}

	.van-card__content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
</style>
